<template>
    <nut-image-preview
        :show="state.showPreview"
        :images="state.imgData"
        :init-no="state.initNo"
        :autoplay="0"
        @close="hideFn"
    />

    <nut-swiper :pagination-visible="true" pagination-color="#FFFFFF" auto-play="0">
        <nut-swiper-item v-for="(img, index) in productInfo.imgs" :key="index">
            <img :src="img" alt="" @click="showFn(index)" />
        </nut-swiper-item>
    </nut-swiper>

    <p class="product-name">{{ productInfo.name }}</p>
</template>
<script lang="ts" setup>
interface Iprops {
    productInfo: IproductInfo
}

interface IproductInfo {
    name: string
    imgs: string[]
}
const { productInfo } = defineProps<Iprops>()

import { reactive } from 'vue'
const state = reactive({
    showPreview: false,
    initNo: 0,
    imgData: productInfo.imgs.map((img) => {
        return { src: img }
    })
})

const showFn = (index) => {
    state.initNo = index
    state.showPreview = true
}

const hideFn = () => {
    state.showPreview = false
}
</script>

<style lang="less">
@primary-color: #d81e06;

.nut-swiper-item {
    height: 750px;

    img {
        width: 100%;
        height: 100%;
    }
}

.product-name {
    padding: 32px;
}
</style>
